<template>
  <!--  <div class="container">-->
  <!--    <div class="message">{{title}}</div>-->
  <!--  <div class="container">-->
  <div class="background">
    <button class="borderStyle">▼</button>
    <picker class="levelStyle" @change="bindPickerChange" :value="index" :range="array">
      <view>
        {{array[index]}}
      </view>
    </picker>
    <button class="startStyle" @click="clickToStart">开始答题</button>
  </div>
  <!--  </div>-->
  <!--  </div>-->
</template>

<script>
  export default {
    /**
     * 使用array记录难度的选项
     * index为当前选择的难度，从0开始，与array一一对应
     */
    data () {
      return {
        title: 'level page',
        array: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
        index: 0
      }
    },
    methods: {
      /**
       * 记录用户选择的难度并同步到缓存中
       * 导向答题界面
       */
      clickToStart () {
        wx.setStorageSync('level', this.array[this.index])
        wx.navigateTo({
          url: '/pages/question/main'
        })
      },
      bindPickerChange (res) {
        this.index = res.mp.detail.value
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .background {
    background-image:url('');
    width: 100%;
    height: 1334rpx;
    background-repeat: no-repeat;
  }

  .startStyle {
    width: 475rpx;
    top: 900rpx;
    border-radius: 50rpx;
    color: #2abee9;
    font-size: 40rpx;
    align-items: center;
  }

  .borderStyle {
    top: 460rpx;
    width: 475rpx;
    border-radius: 50rpx;
    font-size: 40rpx;
    /*color: #f8f8f8;*/
    align-items: center;
    text-align: right;
  }

  .levelStyle {
    background: #ffffff;
    position: absolute;
    top: 478rpx;
    left: 37.5%;
    font-size: 50rpx;
    color: #2abee9;
  }

  .message {
    color: red;
    padding: 10px;
    text-align: center;
  }
</style>
